<template>
    <div id="merpar">
        <div class="role_left">
           <div class="role">
            <div class="role_s"><img src="../image/矩形 11 拷贝 5.png" alt="">
                                <img src="../image/基本信息.png" alt="">
            </div>
            <div class="role_hx"><img src="../image/矩形 11 拷贝 12.png" alt=""></div>
                <div class="role_wx"><img src="../image/微信截图_20210827163559.png" alt=""></div>
            <div class="role_card_main">
                <div class="role_text-1"><span>会员id号</span></div>
                <div class="role_text-2"><span>2365 9874 5263</span></div>
                <div class="role_text-3"><span>昵    称</span></div>
                <div class="role_text-4"><span>澜川若宁</span></div>
                <div class="role_text-5"><span>会员卡号</span></div>
                <div class="role_text-6"><span>CX23565234</span></div>
                <div class="role_text-7"><span>注册时间</span></div>
                <div class="role_text-8"><span>2021-08-26 12:30:56</span></div>
                <div class="role_text-9"><span>真实姓名</span></div>
                <div class="role_text-10"><span>杨孟洁</span></div>
                <div class="role_text-11"><span>手 机 号</span></div>
                <div class="role_text-12"><span>15256395423</span></div>
                <div class="role_text-13"><span>等级</span></div>
                <div class="role_text-14"><span>V03</span></div>
                <div class="role_text-15"><span>积分</span></div>
                <div class="role_text-16"><span>352</span></div>
                <div class="role_text-17"><span>状态</span></div>
                <div class="role_text-18"><span>禁言中</span></div>
                <div class="role_text-19"><span>最新登录</span></div>
                <div class="role_text-20"><span>2001-10-12 13:25:46</span></div>
            </div>
           </div>
           <div class="role_bottom">
            <div class="role_b"><img src="../image/矩形 11 拷贝 5.png" alt="">
                                <img src="../image/评论.png" alt="">
            </div>
            <div class="role_hx"><img src="../image/矩形 11 拷贝 12.png" alt=""></div>
            <div class="role_bottom_text-1"><span>张家口冰雪世界-平日五按天畅滑滑雪票</span></div>
            <div class="role_bottom_text-2"><span>2021-08-23 05:26:34</span></div>
            <div class="role_bottom_text-3"><span>时间评论的价值就在于，在对事件理性分析的基础上对某一现象的是与非做出判断。这就要从大家习以为常的事件中挖掘关键，发现本质，对热点能提出独到的观点。事实评论应对社会问题洞察本质，进行批判，起到激浊扬清的作用。</span></div>
            <div class="role_bottom_btn"><el-button type="danger">删除</el-button></div>
           </div>
          
           
        </div>
        <div class="role_right">
            <div class="role_right_s">
                    <img src="../image/矩形 11 拷贝 5.png" alt="">
                    <img src="../image/购买记录.png" alt="">
            </div>
            <div class="role_right_hx"><img src="../image/矩形 11 拷贝 12.png" alt=""></div>
            <div class="role_right_card">
                <div class="role_right_ch"><span>张家口冰雪世界-平日五按天畅滑滑雪票</span></div>
                <div class="role_right_text1"><span>订 单 号</span></div>
                <div class="role_right_text2"><span>23653265622356589</span></div>
                <div class="role_right_text3"><span>单 价</span></div>
                <div class="role_right_tag"><el-tag
                        type="danger"
                        color="red"
                        size="mini"
                    >待使用</el-tag></div>
                    <div class="role_right_text4"><span>356.00</span></div>
                    <div class="role-right_text5"><span>数量</span></div>
                    <div class="role-right_text6"><span>*1</span></div>
                    <div class="role-right_text7"><span>预定日期</span></div>
                    <div class="role-right_text8"><span>2021-07-29 周六</span></div>
                    <div class="role-right_text9"><span>下单时间</span></div>
                    <div class="role-right_image"><img src="../image/矩形 11 拷贝 16.png" alt=""></div>
                    <div class="role-right_text10"><span>2021-08-23 08:36:59</span></div>
                    <div class="role_right_text11"><img src="../image/￥ 166.00.png" alt=""></div>
            </div>
        </div>
    </div>
</template>
<script>
    // import { getlist } from "../request/index.js"
    export default {
        data() {
            return {
                msgcljx: ""
            }
        },
        methods: {
            // get_list() {
                //    console.log(axios);
                // console.log("我被点击了");
                // getlist().then((res) => {
                    // console.log(res.data.data);
                    // this.msgcljx = res.data.data
                // }).catch((err) => {
                    // console.log(err);
                // })
            // }
        },
        mounted() {
            // this.get_list()
        },
    }
</script>
<style>
    
    .role_right_text11{
        position: absolute;
        right: 10px;
        bottom: 16px;
    }
    .role-right_image{
        left: 21px;
    position: absolute;
    top: 156px;
    }
    .role-right_text10{
        position: absolute;
        top: 185px;
        font-weight: 700;
        left: 100px;
    }
    .role-right_text9{
        position: absolute;
    top: 185px;
    left: 10px;
    }
    .role-right_text8{
        position: absolute;
        top: 139px;
        font-weight: 700;
        left: 100px;
    }
    .role-right_text7{
        position: absolute;
    top: 139px;
    left: 10px;
    }
    .role-right_text6{
        top: 111px;
        left: 100px;
        position: absolute;
        font-weight: 700;
    }
    .role-right_text5{
        position: absolute;
    top: 111px;
    left: 10px;
    }
    .role_right_text4{
        top: 85px;
        position: absolute;
        left: 100px;
        font-weight: 700;
    }
    .el-tag.el-tag--danger {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #fff;
}
    .role_right_tag{
        position: absolute;
        right: 0;
        top: 0;
    }
    .role_card_main{
        width: 70%;

        height: 50%;
        /* background-color: red; */
    }
.role_right_text3{
    position: absolute;
    top: 85px;
    left: 10px;
}
    .role_right_text2{
        position: absolute;
        top: 60px;
        left: 100px;
        font-weight: 700;
    }
    .role_right_text1{
        position: absolute;
        top: 60px;
        left: 10px;
    }
    .role_right_ch{
        position: absolute;
        color: #4C8DFF;
        top: 10px;
        left: 10px;
        font-weight: 700;
    }
    .role_right_card{
        width: 96%;
        height: 220px;
        margin-left: 2%;
        margin-top: 20%;
        /* background-color: red; */
        background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(228, 206, 206, 0.5);
        position: relative;
    }
    .role_bottom_text-3{
        position: absolute;
        top: 150px;
        left: 20px;
    }
    .role_bottom_text-2{
        font-size:10px ;
        position: absolute;
        top: 105px;
        left: 20px;
    }
    .role_bottom_btn{
        position: absolute;
        

            right: 36px;
    top: 75px;

    }
    .role_bottom_text-1{
        color: #3B3B3B;
        font-size: 18px;
      
        top: 83px;
    left: 20px;
        position: absolute;
    }
     .role_text-20{
             
             position: absolute;
         top: 304px;
         left: 456px;
         font-weight: 700;
         }
    .role_text-19{
                
        position: absolute;
    top: 273px;
    left: 456px;
    color: #929292
    
    }
    .role_text-18{
        position: absolute;
        top: 1.25rem;
        left: .91rem;
        color: #F7999B;
    }
    .role_text-17{
        
        position: absolute;
        top: 1.4rem;
        left: 0.91rem;
        color: #929292
    }
      .role_text-16{
      position: absolute;
      top: 219px;
      left: 955px;
      font-weight: 700;
  }
        .role_text-15{
            position: absolute;
            top: 183px;
            left: 955px;
            color: #929292
        }
      .role_text-14{
      position: absolute;
      top: 183px;
      left:671px;
      font-weight: 700;
  }
    .role_text-13{
        position: absolute;
        top: 1.55rem;
        left: 671px;
        color: #929292
    }
      .role_text-12{
      position: absolute;
      top: 219px;
      left: 456px;
      font-weight: 700;
  }
    .role_text-11{
        position: absolute;
        top: 183px;
        left: 456px;
        color: #929292
    }
    .role_text-10{

        position: absolute;
    top: .9rem;
    left: .91rem;
    font-weight: 700;
    }
    .role_text-9{
      
        position: absolute;
    top: 1rem;
    left: .91rem;
    color: #929292
    }
    .role_text-8{
        position: absolute;
 top: 122px;
 left: 955px;
 font-weight: 700;
    }
    .role_text-7{
 
        position: absolute;
    top: 92px;
    left: 955px;
    color: #929292
      
}
    .role_text-6{
 
        position: absolute;
    top: 122px;
    left: 671px;
    font-weight: 700;
      
    }
    .role_text-5{
        
        position: absolute;
    top: 92px;
    left: 671px;
    color: #929292;
    font-size: 0.09rem;

    }
    .role_text-4{
           position: absolute;
           top: 122px;
           left: 456px;
           font-weight: 700;
    }
    .role_text-3 {
  
        position: absolute;
    top: 92px;
    left: 456px;
    font-size: 0.09rem;
    color: #929292;
}
    .role_text-2{
        position: absolute;
        top: .63rem;
        left: .91rem;
        font-weight: 700;
        color: #282828;
    }
    .role_text-1{
        position: absolute;
        top: 0.5rem;
        left: 0.91rem;
        font-size: 0.09rem;
        color: #929292;
        
    }
    #merpar {
        width: 100%;
        height: 100%;
        /* background-color: #fff; */
        margin-top: 5px;
        /* background-color: red; */
    }
    .role{
        width: 100%;
        height: 42%;
        background-color: #fff;
        /* margin-top: px; */
        position: relative;
    }

    .role_left {
        width: 75%;
        height: 100%;
        background-color: #F3F5FA;
        border-radius: 8px;
        position: relative;
        /* top: 10px; */
        display: inline-block;
        overflow: hidden;

    }

    .role_s {
        position: absolute;
        left: 20px;
        top: 20px;
    }
    .role_b{
        position: absolute;
        left: 20px;
        top: 20px;
    }
    .role_wx{
        position: absolute;
        top: .4rem;
        left: 20px;
    }
    .role_right{
        width: 22%;
        height: 100%;
        background-color: #fff;
        display: inline-block;
        overflow: hidden;
        margin-left: 2%;
        margin-top: 15px;
        border-radius: 8px;
        position: relative;
    }
    .role_hx{
        position: absolute;
        top: 40px;
        left: 20px;
    }
    .role_bottom{
        width: 100%;
        height: 55%;
        background-color: #fff;
        margin-top: 2%;
        position: relative;
    }
    .role_right_s{
        position: absolute;
        top: 20px;
        left: 20px;
    }
    .role_right_hx{
        position: absolute;
        top: 40px;
    }
</style>